<%@page language="java"  pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
	response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache");
	response.setDateHeader("Expires", 0); response.flushBuffer();
    String header = request.getHeader("user-agent").toLowerCase();
    String transLimit = "";
    String clientType = "";
    String appClient = "";
    String prompt = "";
    if(header.contains("alipay") || header.contains("aliapp")){
        transLimit = "30000"; //AliPay
        appClient = "1";
        prompt = "单笔1-30000元";

    }else if(header.contains("micromessenger") || header.contains("mqqbrowser")){
        transLimit = "50000"; //WeChart
        appClient = "2";
        prompt = "单笔1-50000元";
    }
    if(header.contains("android")){
        clientType = "android";
    }
    if(header.contains("iphone") || header.contains("ipad") || header.contains("ipod")){
        clientType = "ios";
    }
%>
<html class="pixel-ratio-2 retina ios ios-9 ios-9-1 ios-gt-8 ios-gt-7 ios-gt-6 watch-active-state">

<HEAD>
	<TITLE>支付</TITLE>
	<%--<BASE href="<%=basePath%>">--%>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<META content="IE=10.000" http-equiv="X-UA-Compatible">
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<META http-equiv="X-UA-Compatible" content="IE=edge">
	<META name="apple-mobile-web-app-status-bar-style" content="black">
	<META name="GENERATOR" content="MSHTML 10.00.9200.17296">
	<META name="format-detection" content="telephone=no">
	<META http-equiv="pragma" content="no-cache">
	<META http-equiv="cache-control" content="no-cache">
	<META http-equiv="expires" content="0">
	<META content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/f7/my-app.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/f7/framework7.ios.min.css"  type="text/css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/f7/framework7.ios.colors.min.css" type="text/css" />
	<SCRIPT type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></SCRIPT>
	<script type="text/javascript" src='${pageContext.request.contextPath}/js/f7/framework7.js'></script>
	<script type="text/javascript" src='${pageContext.request.contextPath}/js/f7/framework7.min.js'></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.qrcode.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<style type="text/css">
		*{
			-webkit-touch-callout:none;  /*系统默认菜单被禁用*/
			-webkit-user-select:none; /*webkit浏览器*/
			-khtml-user-select:none; /*早期浏览器*/
			-moz-user-select:none;/*火狐*/
			-ms-user-select:none; /*IE10*/
			user-select:none;
		}
	</style>

	<SCRIPT type="text/javascript">

        var myApp,mainView;
        var i = 0;
        $(document).ready(function(){
			var agentUrl='${pageContext.request.contextPath}'+"/image/logo/"+'${terminalTypeId}'+"-adv.png";
			var defaulUrl='${pageContext.request.contextPath}'+"/image/f7/0title.png";
			var ImgObj = new Image(); //判断图片是否存在
			ImgObj.src = agentUrl;
			//没有图片，则返回-1
			var wi=ImgObj.width;
			var he=ImgObj.height;
			if (wi > 0 && he > 0) {
				$("#advLogo").html("<img src='"+agentUrl+"' width='100%' height='100%'/>");

			} else {
				$("#advLogo").html("<img src='"+agentUrl+"' width='100%' height='100%'/>");
			}

            myApp = new Framework7({
                precompileTemplates: true,
                swipeBackPage:false,
                template7Pages: true
            });

            mainView = myApp.addView('.view-main', {
                domCache: true
            });
		});

		function numberChange(val){
            if(i==0){
                document.getElementById("showmoney").innerText="";
                i++;
            }
			if('C'==val){
				document.getElementById("showmoney").innerText="0";
				return;
			}
			if('D'==val){
				var amount = document.getElementById("showmoney").innerText;
				var length = amount.length;
				if (length == 1){
					document.getElementById("showmoney").innerText="0";
					var ddd=document.getElementById("buttonpay");
					ddd.style.cssText="background:#e2e2e2;border-radius: 5px;";
					return;
				}
				if (length > 1) {
					document.getElementById("showmoney").innerText=amount.substring(0, length-1);
				}
				return;
			}

			var ddd=document.getElementById("buttonpay");
			ddd.style.cssText="background:#d8effe;border-radius: 5px;";
			if(parseInt(document.getElementById("showmoney").innerText)>9999999){
				myApp.alert("<div style='text-align:center;'>输入金额值超限,请重新输入</div>", "提示");
				return;
			}
			if(document.getElementById("showmoney").innerText=='0'||document.getElementById("showmoney").innerText=='00'){
				if(val=='.'){
					document.getElementById("showmoney").innerText+=val;
				}else{
					document.getElementById("showmoney").innerText="";
					if(!("C"==val)){
						document.getElementById("showmoney").innerText+=val;
					}else{
						document.getElementById("showmoney").innerText="0";
					}
				}
			}else{
				var money = document.getElementById("showmoney").innerText;
				if(money.indexOf('.')>0){
					if(val=='.'){
						return;
					}
					if(money.split(".")[1].length>1){
						return;
					}
				}
				document.getElementById("showmoney").innerText+=val;
			}
		}
		function updatedis(){
			var btn = document.getElementById('buttonpay');
			document.getElementById("showmoney").innerText=0;
			btn.disabled = false;
		}
		function submitAmount(){
			$("#buttonpay").attr("disabled","disabled");
			setTimeout('updatedis()',5000);
			var ddd=document.getElementById("buttonpay");
			ddd.style.cssText="background:#e2e2e2;border-radius: 5px;";
			var amount = parseFloat(document.getElementById("showmoney").innerText);
            var transLimit = $("#transLimit").val();
			var orderId = $("#orderId").val();
			if ((isNaN(amount))||( amount == 0)){
				if(orderId==""){
					myApp.alert("<div style='text-align:center;'>请录入付款金额</div>", "提示");
				}
				return;
			}
			if ((isNaN(amount))||( amount > parseFloat(transLimit))){
				myApp.alert("<div style='text-align:center;'>输入金额值超限,请重新输入(限额"+transLimit+"元)</div>", "提示");
				return;
			}
			$("#amt").val(amount);
			if (navigator.onLine) {
				var basePath = $("#basePath").val();
				var userId = $("#userId").val();
				var openId= $("#openId").val();
				var code = $("#code").val();
				var amt= $("#amt").val();
                var clientType = $("#clientType").val();
                var appClient = $("#appClient").val();
				$.post(
						'../trans/officialAccPay.action',
						{userId:userId,payType:2,amt:amt,openId:openId,code:code},
						function (data) {
							var json=eval("("+data+")");
							if(json.channel==86){
								$("#data").val(JSON.stringify(json.paySign));
								$("#formData1").submit();
							}else if(json.channel==85){
								$("#orderId").val(json.externalId);
								$("#amt").val(amt);
								jsApiCall(json);
							}else if(json.channel==84){
								if('0'==json.code){
									$("#orderId").val(json.orderId);
									$("#externalId").val(json.externalId);
									window.location.href = json.payUrl;
								}
							}else if(json.channel==87){
								if('' == json.payUrl || null == json.payUrl || 'null' == json.payUrl || 'undefined' == json.payUrl){
									myApp.alert(json.msg);
                                }else{
                                    window.location.href = json.payUrl;
                                }
							}else if(json.channel==89){
                                if('' == json.payUrl || null == json.payUrl || 'null' == json.payUrl || 'undefined' == json.payUrl){
                                    myApp.alert(json.msg);
                                }else{
                                    if (clientType == "ios") {
                                        showMyQrCode(json.payUrl);
                                    } else if (clientType == "android") {
                                        showMyQrCode(json.payUrl);
                                    }else {
                                        showMyQrCode(json.payUrl);
                                    }
                                }
                            } else if(json.channel==99){
								if('' == json.payUrl || null == json.payUrl || 'null' == json.payUrl || 'undefined' == json.payUrl){
									myApp.alert(json.message);
								}else{
                                    if(appClient  == "1"){//AliPay
                                        window.location.href = json.payUrl;
                                    }else if(appClient  == "2"){//weChart
                                        if (clientType == "ios") {
                                            showMyQrCode(json.payUrl);
                                        } else if (clientType == "android") {
                                            showMyQrCode(json.payUrl);
                                        }else {
                                            showMyQrCode(json.payUrl);
                                        }
                                    }else {
                                        showMyQrCode(json.payUrl);
                                    }
                                }
							}else{
								if(json.msg.indexOf("验证未通过") >= 0){
									myApp.alert("报备未完成,暂时不支持支付宝秒到,请先使用微信!(报备需要2~3工作日)");
								}else{
									myApp.alert(json.msg);
								}
							}

						}
				);

			} else {
				myApp.alert("<div style='text-align:center;'>网络状况不佳，请稍后再试或使用其他支付方式</div>", "提示");
			}
		}

		$(function(){
			$("#cusCenterBtn").click(function(){
				$('body').append('<form id="goManage" action="../user/customerRegisterManage.action?terminalTypeId='+${terminalTypeId}+'" method="post" data-ajax="false"></form>');
				$("#goManage").submit();

			});
		});
		function jsApiCall(json){
			WeixinJSBridge.invoke(
					'getBrandWCPayRequest',{
						"appId" : json.appId, //公众号名称，由商户传入
						"timeStamp": json.timestamp, //时间戳，自1970 年以来的秒数
						"nonceStr" : json.nonceStr, //随机串
						"package" : json.prepayId,
						"signType" : "MD5", //微信签名方式:
						"paySign" : json.paySign  //微信签名,
					},function(res){
						if(res.err_msg == "get_brand_wcpay_request:ok" ) {
							// 此处可以使用此方式判断前端返回,微信团队郑重提示：res.err_msg 将在用户支付成功后返回ok，但并不保证它绝对可靠，。
							$("#formData").submit();
						}
					}
			);
		}
        function showMyQrCode(payUrl){
            console.dir(payUrl);
            $("#myQRCode").html('');
            $("#myQRCodeImg").html('');
            $("#myQRCode").qrcode(payUrl);
            mainView.router.load({pageName: 'pageQRCode'});

            $("#myQRCode").hide();
            //获取网页中的canvas对象
            var mycanvas1=document.getElementsByTagName('canvas')[0];

            //将转换后的img标签插入到html中
            var img=convertCanvasToImage(mycanvas1);
            $('#myQRCodeImg').append("<p style='text-align: center'>请扫码或长按识别二维码<br/>此二维码有效时间5分钟</p>");
            $('#myQRCodeImg').append(img);//imagQrDiv表示你要插入的容器id
        }

        function convertCanvasToImage(canvas) {
            //新Image对象，可以理解为DOM
            var image = new Image();
            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
            // 指定格式 PNG
            image.src = canvas.toDataURL("image/png");
            return image;
        }
	</SCRIPT>
</HEAD>

<BODY>
<div class="views">
    <div class="view view-main">
        <div class="pages">
            <input type="hidden" id="transLimit" value="<%=transLimit%>">
            <input type="hidden" id="clientType" value="<%=clientType%>">
            <input type="hidden" id="appClient" value="<%=appClient%>">
            <form id="formData1" action="http://www.shanglianchu.cn/payform/organization_ymf">
                <input id="data" name="data" value="" type="hidden">
            </form>
            <div data-page="pageTrans" class="page">
                <form data-role="none" id="formData" method="post" data-ajax="false" onsubmit="return submitAmount();" action="weixinPaySuccess.action">
                    <div class="wrapper">
                        <div data-role="header" style="background-color:#d8effe;height:20%;" id="advLogo">
                            <img src="${pageContext.request.contextPath}/image/f7/0title.png" width="100%" height="100%"/>
                        </div>
                        <div class="margin-cuFuNa" >
                            <span class="font18 margin-left20" >${fullName}</span>
                        </div>
                        <div class="margin-money" >
                            <span class="font18 margin-left20">付款金额</span>
			                <span style="float: right;margin: 0px 20px 0px 0px;" >
				                <button type="button" class="cum-btn" id="cusCenterBtn">商户管理</button>
			                </span>
                        </div>
                        <div class="pub-bg money-num margin-top" style="margin-top: 8px">
                            <span class="fcolor1 font25 float-right-m selfS">￥</span>
                            <div class="fcolor1 font20" id="showmoney"><%=prompt%></div>
                        </div>
                        <div style="margin: auto">
                            <div style="float: left;line-height: normal;margin: 4% 0PX 0PX 10PX;color: red;">${notice}</div>
                            <div style="float: right;line-height: normal;margin: 4% 10PX 0PX 0PX;"><a href="#" style="color:#979595" class="open-popup">操作指引</a></div>
                        </div>

                        <div class="keyboard">
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button1" onclick="numberChange('1');">1</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button2" onclick="numberChange('2');">2</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button3" onclick="numberChange('3');">3</button>
                            <button type="button" class="button num-btn" style="border-radius: 5px;border:1px solid #e2e2e2;height:56px;" id="buttonDel" onclick="numberChange('D');">
                                <img src="${pageContext.request.contextPath}/image/f7/09delete.png" width="40px">
                            </button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;"id ="button4" onclick="numberChange('4');">4</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button5" onclick="numberChange('5');">5</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button6" onclick="numberChange('6');">6</button>
                            <button type="button" class="num-btn" style="height:56px;" >&nbsp;</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button7" onclick="numberChange('7');">7</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button8" onclick="numberChange('8');">8</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button9"onclick="numberChange('9');">9</button>
                            <button type="button" class="num-btn" style="height:56px;" >&nbsp;</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button00" onclick="numberChange('00');">00</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="button0" onclick="numberChange('0');">0</button>
                            <button type="button" class="button num-btn" style="border:1px solid #e2e2e2;color:#535353;font-size:25px;height:56px;" id ="buttondot" onclick="numberChange('.');">.</button>
                            <button  type="button" class="pay-btn"id ="buttonpay" onclick="submitAmount();">确认<BR/>支付</button>
                        </div>
                        <div class="popup popup-about">
                            <div class="view navbar-fixed">
                                <div class="pages">
                                    <div class="page">
                                        <div class="navbar">
                                            <div class="navbar-inner">
                                                <div class="center">操作指引</div>
                                                <div class="right"><a href="#" class="link close-popup">确认</a></div>
                                            </div>
                                        </div>
                                        <div class="page-content">
                                            <img src="${pageContext.request.contextPath}/image/f7/wechatPay1.png" style="width:99%; padding-left:1px;"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="externalId" name="externalId" >
                    <input type="hidden" id="code" name="code" value="${code}">
                    <input type="hidden" id="userId" name="id" value="${userId}">
                    <input type="hidden" id="openId" name="openId" value="${openId}">
                    <input type="hidden" id="orderId" name="orderId" value="">
                    <input type="hidden" id="amt" name="amt">
                </form>
            </div>
            <div class="page cached navbar-fixed toolbar-fixed" data-page="pageQRCode">
                <div class="navbar" style="background:#3b98d4;color:#ffffff;">
                    <div class="navbar-inner">
                        <div class="left">
                            <a href="#pageBaseInfo" class="back" style="color:#ffffff;">
                                <b>〈</b> 返回
                            </a>
                        </div>
                        <div class="center" id="pageSettleBillListTitle">支付二维码</div>
                    </div>
                </div>

                <div class="page-content">
                    <div class="card">
                        <div class="card-content">
                            <div class="card-content-inner" id="myQRCode" style="text-align:center;" >

                            </div>
                            <div class="card-content-inner" id="myQRCodeImg" style="text-align:center;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</BODY>
</html>